<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="18" style="margin-top: 20px">
      <el-col :span="5" :offset="4"
              style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); border-radius: 10px; min-height: 600px; background: rgb(250 255 220);">
        <div class="grid-content bg-purple" style="padding-top: 15%; text-align: center;">
          <div class="block">
            <el-avatar :size="80" style="background: cadetblue">{{ userInfo.userName }}</el-avatar>
          </div>
        </div>
        <div class="grid-content bg-purple" style="padding-top: 5%; text-align: center;">
          <div class="block">
            <span>{{ userInfo.userName }}</span>
          </div>
        </div>

        <div class="grid-content bg-purple" style="padding-top: 5%; text-align: center;">
          <div class="block" style="color: #818181">
            <i class="el-icon-s-custom"/><span style="font-size: 14px;">{{ userInfo.company }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="11"
              style="margin-left: 1%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); border-radius: 10px; min-height: 800px; background: rgb(255 255 251);">
        <div class="grid-content bg-purple-light">
          <el-tabs v-model="activeTagName" @tab-click="handleTagClick">
            <el-tab-pane label="用户信息" name="first">
              <div>
                <el-form ref="form" :model="userInfo" label-width="80px" size="mini">
                  <el-form-item label="登录名称">
                    <el-input v-model="userInfo.loginName" disabled style="color: white"></el-input>
                  </el-form-item>

                  <el-form-item label="用户昵称">
                    <el-input v-model="userInfo.userName" disabled></el-input>
                  </el-form-item>

                  <el-form-item label="用户角色">
                    <el-input v-model="userInfo.roleNameCN" disabled></el-input>
                  </el-form-item>

                  <el-form-item label="邮箱地址">
                    <el-input v-model="userInfo.email" disabled></el-input>
                  </el-form-item>

                  <el-form-item label="所在公司">
                    <el-input v-model="userInfo.company" disabled></el-input>
                  </el-form-item>

                  <el-form-item label="用户性别">
                    <el-radio v-model="userInfo.sex" disabled label="1">男</el-radio>
                    <el-radio v-model="userInfo.sex" disabled label="0">女</el-radio>
                  </el-form-item>

                  <el-form-item label="手机号码">
                    <el-input v-model="userInfo.phonenumber" disabled></el-input>
                  </el-form-item>

                  <el-form-item label="注册时间">
                    <el-input v-model="userInfo.createAt" disabled></el-input>
                  </el-form-item>

                  <el-form-item label="更新时间">
                    <el-input v-model="userInfo.updateAt" disabled></el-input>
                  </el-form-item>

                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="参与信息" name="second">
              <div>
                <el-table size="small" :data="shifts" highlight-current-row v-loading="shiftListLoding" border
                          element-loading-text="拼命加载中" :header-row-style="{width: '100%', color: 'darkorange'}">
                  <el-table-column align="center" prop="surveyName" label="问卷名称"></el-table-column>
                  <el-table-column align="center" prop="shiftDate" label="参与日期"></el-table-column>
                  <el-table-column align="center" prop="address" label="所在地址"></el-table-column>
                  <el-table-column align="center" label="操作" min-width="300">
                    <template slot-scope="scope">
                      <el-button size="mini" @click="showAnswers(scope.$index, scope.row)">样本</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <Pagination v-bind:child-msg="shiftPageParams" @callFather="shiftCallFather"/>
              </div>
            </el-tab-pane>
            <el-tab-pane label="操作日志" name="third">
              <div>
                正在开发中...
              </div>
            </el-tab-pane>
            <el-tab-pane label="通知" name="fourth">
              <div>
                正在开发中...
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>

    <!-- 新增界面 -->
    <el-dialog :title="questionsDialog.title" :visible.sync="questionsDialog.visible" :close-on-click-modal="false"
               @click='questionsDialog.visible = false'>
      <el-table size="small" :data="shifts" highlight-current-row v-loading="shiftListLoding" border
                element-loading-text="拼命加载中" :header-row-style="{width: '100%', color: 'darkorange'}">
        <el-table-column align="center" prop="surveyName" label="问卷名称"></el-table-column>
        <el-table-column align="center" prop="shiftDate" label="参与日期"></el-table-column>
        <el-table-column align="center" prop="address" label="所在地址"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='questionsDialog.visible = false'>关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import {me} from '../../../api/userMG';
import {myShifts} from '../../../api/baseMG';
import Pagination from '../../../components/Pagination'
import {getStore} from "../../../utils/util";

export default {
  name: "welcome",
  data() {
    return {
      questionsDialog: {
        title: '问卷样本明细',
        visible: false
      },
      shifts: [],
      shiftListLoding: false,
      shiftPageParams: {
        pageNum: 1,
        pageSize: 20
      },
      userInfo: {},
      formInline: {},
      activeTagName: 'first'
    }
  },
  created() {
    this.loadMe();
    this.loadShifts();
  },
  components: {
    Pagination
  },
  methods: {
    showAnswers(index, row) {
      this.questionsDialog.visible = true;
    },
    shiftCallFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.perPage = parm.pageSize;
      this.getdata(this.formInline)
    },
    loadShifts() {
      myShifts({}).then(resp => {
        if (resp.success) {
          this.shifts = resp.data.list;
        }
      })
    },
    loadMe() {
      this.userInfo = JSON.parse(getStore("userInfo"));
    },
    handleTagClick(tab, event) {
      console.log(tab, event);
    }
  }
}

</script>
